<html xmlns="http://www.w3.org/1999/xhtml" id="browser-integration">
  <head>
    <title>ブラウザ統合</title>
  </head>

  <body>


<fixme>
The embed tag
    - Mention that the *preferred* way to embed an app in an HTML page
      is to use LzEmbed (see subsequent section).
    - Show cycle of inclusion by requesting a .lzx file, then copying
      HTML source and pasting into your own HTML page.

Communicating with JavaScript
    - Need reverse example (lzSetCanvasAttribute()) in this section.
    - You must use LzEmbed()
    - You must add a lzHistEmbed('/lps-3.0b2'); call in your browser JS.
    - You must use a &lt;method event="onmyattr"&gt; in your canvas
    - You have to use the lzSetCanvasAttribute() method call from
      browser JS.
</fixme>
<h1>ブラウザ統合</h1>

<p>Laszloアプリケーションの見た目や動作はブラウザやOSに依存しませんが、
ブラウザのコンテナはアプリケーションに対して、いくつかの重要な制限をもたらします。
また、そこには、アプリケーションが利用できるたくさんの特徴もあります。
</p>
<h2>ブラウザサイズに合わせたLaszloアプリケーションの概算</h2>
<p>
Laszloアプリケーションのcanvasを作る場合、サイズを固定することも、
またブラウザの伸縮に合わせることもできます。
canvasのサイズを固定したい場合には、例えば<code>width="40" height="40"</code>のように、
整数値でその高さと幅とをセットします。canvasスケールを持つ場合には、高さと幅をパーセンテージで表現します。
</p>
<note>
OpenLaszloのバージョン3.0では、もはやFlash5をサポートしていません。アプリケーションはFlash6か7にコンパイルされる必要があります。デフォルトのターゲットはFlash6です。
</note>

<h2> LzBrowserサービス</h2>
<p>
<classname link="true">LzBrowser</classname>サービスは、ブラウザとプレーヤー環境へのアクセスを提供します。
そこには、ブラウザ内のURLをロードするメソッドやプレーヤーのバージョンをチェックするメソッドも含まれています。
さらには、<code>LzBrowser</code>サービスを、以下に示す他のLaszlo関数と一緒に使うことで、
LaszloアプリケーションとブラウザのJavascript間で情報やコントロールをやり取りするアプリケーションを作ることができます。
</p>
<p>
この章の例を探求することで、このサービスが提供する機能を探求する機会を得ることができるでしょう。<code>Lzbrowser</code>は常に実行されています。
</p>

<!--=========================================================================-->
<!-- embedding applications                                                 -->
<!--=========================================================================-->

<fixme>


&lt;!DOCTYPE html
  PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
   &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

      &lt;link rel="SHORTCUT ICON" href="http://www.laszlosystems.com/favicon.ico"&gt;
      &lt;title&gt;Laszlo Application&lt;/title&gt;&lt;style type="text/css"&gt;
          html, body { margin: 0; padding: 0; height: 100%; }
          body { background-color: #ffffff; }
        &lt;/style&gt;&lt;/head&gt;
   &lt;body&gt;&lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0"
data="hello.lzx?lzt=swf" width="500" height="400"&gt;
         &lt;param name="movie" value="hello.lzx?lzt=swf"&gt;

         &lt;param name="quality" value="high"&gt;
         &lt;param name="scale" value="noscale"&gt;
         &lt;param name="salign" value="LT"&gt;
         &lt;param name="menu" value="false"&gt;
         &lt;param name="FlashVars" value="foobar=abcdef&amp;blah=objectred"&gt;
         &lt;param name="bgcolor" value="#ffffff"&gt;
         &lt;embed src="hello.lzx?lzt=swf" quality="high" 
         scale="noscale" salign="lt"
          width="500" height="400" 
          FlashVars="foobar=abcdef&amp;blah=embedblue"
          bgcolor="#ffffff" 
          type="application/x-shockwave-flash" 
          pluginspage="http://www.macromedia.com/go/getflashplayer"&gt;&lt;/embed&gt;&lt;/object&gt;&lt;/body&gt;
&lt;/html&gt;


</fixme>
<h2>Laszloアプリケーションの埋め込み</h2>

<p>
Laszloアプリケーションは、flashプレーヤーで実行できるLPSから送られるswfファイルです。lpsからクライアントへ送られる場合、
</p>

<ul>
    <li>“裸の”swfファイル</li>
    <li>html“カバー”ページに埋め込まれたswfファイル</li>
    <li>xmlソース</li>
</ul>
<p>の状態をとることができます。</p>
<p>
アプリケーションを要求するさまざまな方法についての議論は、<a href="${deploy}/request-types.html">“デベロッパーガイドの要求タイプの章”</a>を参照のこと。
</p>
<p>このセクションでは、LaszloアプリケーションをHTMLのページ内に埋め込む方法を見ていきます。つまり実際には、HTMLのページがFlashプレーヤーを呼び出し、プレーヤがLaszloのアプリケーションを実行するということです。</p>

<h3>LaszloアプリケーションのHTMLページへの埋め込み</h3>
<p>
LaszloアプリケーションをHTMLページへ埋め込む場合、そのページは、
埋め込むアプリケーションの場所とその扱い方を知る方法を、いくつか持っていなければいけません。
つまり、埋め込まれたLaszloアプリケーションは実際のところswfファイルである、
などの情報をブラウザに伝える必要があるのです。
必要とされる情報は、<code>embed.js</code>と呼ばれるファイルに含まれており、HTMLファイルのhead部分の&lt;script&gt;タグ内に、
そのファイルへの参照を書いておく必要があります。
特に、このフィールドは、<code>LzEmbed</code>関数を定義します。
</p>
<p>
もちろん、この情報をHTMLファイル内に、“手作業で”記述することもできますが、
より簡単な方法として、OpenLaszloServerを使って全ての必要な情報が含まれる“wrapper（包み込み）”ページを生成する方法があります。
このwrapperは編集可能であり、またその内容を既存のHTMLページに貼り付けることもできます。
以下にそのステップを紹介します。
</p>
<ol>
	<li>“?lzt = html”という要求タイプを使って、lzxアプリケーションを呼び出す。これで“wrapper”を生成する。</li>
	<li>ブラウザの“view source（ソースを見る）”機能を使い、wrapperの内容をコピーし、それを新規htmlファイルに貼り付ける。</li>
    <li>HTMLファイルのhead部分に、<code>embed.js</code>を含むスクリプトのタグがあるので、必要であればそのパスを修正する。</li>
	<li>周りのスクリプトタグも含めて、lzEmbedメソッド呼出をコピーする。</li>
	<li>HTMLページ内でLaszloアプリケーションを埋め込みたい位置に貼り付ける。</li>
	<li>ブラウザでHTMLファイルを実行し、きちんと動いているかどうか確認する。</li>
</ol>
<p>
以下の簡単なLaszloアプリケーションを見てみましょう（今は、<code>onreset</code>メソッドは読み飛ばしてください。後から詳しく扱います）。
</p>
<example title="Hello Grace!">
&lt;canvas height="200" debug="true" proxied="false"&gt;
  &lt;attribute name="reset"/&gt;
  &lt;method event="onreset"&gt;
    redview.unfade.dostart()
    Debug.write('Reset Button clicked')
  &lt;/method&gt;
  &lt;debug y="100"/&gt;
     &lt;view name="redview" bgcolor="red" height="30" width="150" clip="true"&gt;
       &lt;animator name="fade" attribute="opacity" to=".10" duration="2000"/&gt;
       &lt;animator name="unfade" attribute="opacity" to="1" duration="2000" start="false"/&gt;
       &lt;text x="15"&gt; Hello Grace!
         &lt;animator name="wrapper" attribute="x" to="150" duration="2000"/&gt;
       &lt;/text&gt;
     &lt;/view&gt;
&lt;/canvas&gt;
</example>
<p>
?lzt = htmlタイプによって呼び出されることにより戻されたwrapperページは、以下のwrapperを返します。
</p>
<example extract="false" title="Simple wrapper page">
&lt;!DOCTYPE html
  PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
   &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
   
      &lt;link rel="SHORTCUT ICON" href="http://www.laszlosystems.com/favicon.ico"&gt;
      &lt;title&gt;Laszlo Application&lt;/title&gt;&lt;style type="text/css"&gt;
      html, body { margin: 0; padding: 0; height: 100%; }
      body { background-color: #ffffff; }
    &lt;/style&gt;&lt;script src="/lps-dev/lps/includes/embed.js" type="text/javascript"&gt;&lt;/script&gt;&lt;/head&gt;
   &lt;body&gt;&lt;script type="text/javascript"&gt;
          lzEmbed({url: 'graceie.lzx?lzt=swf', bgcolor: '#ffffff', width: '500', height: '200'});
        &lt;/script&gt;&lt;/body&gt;

&lt;/html&gt;
</example>
<p>
この章の後ろのほうで、より洗練されたアプリケーションを可能にするためのwrapperの修正方法を紹介します。</p>

<h3><tagname link="false">embed</tagname>タグ</h3>

<p>HTMLページにLaszloアプリケーションを埋め込むには、<tagname>embed</tagname>タグを使用します。
この技術は、先に見たように、自動的に処理されます。参考のため、ここに簡単な埋め込みオブジェクトを紹介します。
</p>

<example extract="false" title="The embed tag">
&lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0"
        width="705"
        height="80"&gt;
  &lt;param name="movie" value="laszloapplication.lzx?lzt=swf"&gt;
  &lt;param name="quality" value="high"&gt;
  &lt;param name="scale" value="noscale"&gt;
  &lt;param name="salign" value="LT"&gt;
  &lt;param name="menu" value="false"&gt;
  &lt;param name="bgcolor" value="#394660"&gt;
  &lt;embed src="laszloapplication.lzx?lzt=swf" 
         scale="noscale" 
         salign="lt" 
         width="705" 
         height="80" 
         bgcolor="#394660" 
         type="application/x-shockwave-flash" 
         pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"&gt;
  &lt;/embed&gt;
lt;/object&gt;
</example>


<h3>Flashプレーヤーの検出</h3>
<p>
クライアント上で稼動しているflashのバージョンを検出するロジックを含んだwrapperページを生成するには、要求タイプ
</p>
<pre>
          ?lzt=history
</pre>
<p>
を使ってアプリケーションを呼び出します。
それにより、以下のようなページが生成されます。
</p>
<example extract="false" title="Flash player version-detecting wrapper">
&lt;!DOCTYPE html
  PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
   &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
   
      &lt;link rel="SHORTCUT ICON" href="http://www.laszlosystems.com/favicon.ico"&gt;
      &lt;title&gt;Laszlo Application&lt;/title&gt;&lt;style type="text/css"&gt;
      html, body { margin: 0; padding: 0; height: 100%; }
      body { background-color: #ffffff; }
    &lt;/style&gt;&lt;script language="JavaScript1.1" src="/lps-dev/lps/includes/vbembed.js" type="text/javascript"&gt;&lt;/script&gt;&lt;script src="/lps-dev/lps/includes/embed.js" type="text/javascript"&gt;&lt;/script&gt;&lt;/head&gt;
   &lt;body&gt;&lt;script type="text/javascript"&gt;
          actualVersion = detectFlash();
          requiredVersion = 6;
          if (isIE &amp;&amp; isWin || actualVersion &gt;= requiredVersion) {
            lzEmbed({url: 'graceie.lzx?lzt=swf', bgcolor: '#ffffff', width: '500', height: '200'}, requiredVersion);
          } else {
            document.write('This application requires Flash player ' + requiredVersion + '. &lt;a href="http://www.macromedia.com/go/getflashplayer" target="fpupgrade"&gt;Click here&lt;/a&gt; to upgrade.');
          }
        &lt;/script&gt;&lt;/body&gt;

&lt;/html&gt;
</example>


<fixme>
<p>
これはちょっと、禁じられなければいけませんか？
</p>
<p>
以下のコード（<a href="http://javascript.about.com/library/scripts/blflashdetect.htm">about.com</a>参照）で、どのバージョンのプレーヤーが稼動しているか検出します。
</p>

<example extract="false" title="Version Detection">
&lt;script language="JavaScript"&gt;
function FlashInstalled() {
  result = false;
  if (navigator.mimeTypes &amp;&amp; navigator.mimeTypes["application/x-shockwave-flash"]){
    result = navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin;
  } else {
    if (document.all &amp;&amp; (navigator.applicationVersion.indexOf("Mac")==-1)){
    // IE Windows only -- check for ActiveX control, have to hide code in eval from Netscape (doesn't like try)
      eval('try {var xObj = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");' +
           'if (xObj) result = true; xObj = null;} catch (e){}');
    }
  }
  return result;
}
&lt;/script&gt;
</example>
</fixme>
<p>どのバージョンが稼動しているかによって、全てのバージョンではなく、ある特定のバージョンのflashプレーヤー上で動くLZX機能を使いたいと思うかもしれません。</p>
<h4>Flash7上でのみ利用可能な機能</h4>
<p>
以下の機能は、Flash７の環境でのみ利用可能です。</p>
<ul>
	<li>htmlの&lt;img&gt; タグのサポート</li>
	<li>コンテクスト（右クリック）メニューのサポート</li>
</ul>

<h3>ターゲットの特定</h3>
<p>
<code>lzr</code>クエリーパラメーターはどのバージョンが出されているかを特定します。
状況に応じて<code>lzr=swf6</code>か、あるいは<code>lzr=swf7</code>を使用してください。
</p>
<p>
他の方法として、lzcコマンドを使用してアプリケーションをコンパイルすることもできます。
ターゲットを特定するには<code>--runtime=</code> 引数を使用してください。
</p>
<pre>
        lzc myfile.lzx --runtime=swf7
</pre>

<h3><method>LzEmbed</method>の使用</h3>
<p>
LZXはたくさんの役立つjavascriptルーチンを提供しているので、
webページ内にLZXアプリケーションを埋め込むプロセスを簡単にすることができます。
その中でも特に一般的なのが、lzEmbedです。
これは取り込むアプリケーションと、そのアプリケーションが依存している要求パラメータを簡単に特定するものです。
LzEmbedは<code>/@VERSIONID@/lps/includes/embed.js</code>内にあります。
</p>

<example extract="false" title="Using LzEmbed">
&lt;script type="text/javascript"&gt;
lzEmbed({url: 'header.lzx?lzt=swf', bgcolor: '#394660', width: '705', height: '80'});
&lt;/script&gt;
</example>

<h2>ページデザインとレイアウト</h2>
<p><tagname link="false">div</tagname>タグは、アプリケーションを（html）ページのさまざまな場所に配置するのに使用されます。
例えば、アプリケーションをある領域内の中央に揃えたい場合には、次のように使います。
</p>

<example extract="false" title="Using &lt;div&gt; tags to align applications">
&lt;div align="center"&gt;
&lt;script type="text/javascript"&gt;
  lzEmbed({url: 'header.lzx?lzt=swf', bgcolor: '#394660', width: '705', height: '80'});
&lt;/script&gt;
&lt;/div&gt;
</example>

<!--=========================================================================-->
<!-- Integrating applications with frames                                            -->
<!--=========================================================================-->
<h2>フレームとの統合</h2>
<p>フレームは、（html）ページ内でLaszloアプリケーションを使うのに、大変便利な方法です。
ページ内で、Laszloアプリケーションをナビゲーションやウィジェット（GUIオブジェクト）に使用する場合、オブジェクトの配置にフレームを使用することを検討してみてください。
</p>

<h3>フレームセット</h3>
<p>Laszloアプリケーションを異なる場所で使用しているページをレイアウトする時には、フレームセットを次のように使うことができます。</p>

<example title="example frameset" extract="false">
&lt;html&gt;
&lt;frameset cols="128,*"&gt;
  &lt;frame name="navBar" src="myLaszloNav.lzx?lzt=html" /&gt;
  &lt;frame name="contentArea" src="myLaszloContent.lzx?lzt=html" /&gt;
&lt;/frameset&gt;
&lt;/html&gt;
</example>

<p>
ターゲットフレームにページをロードするには、アプリケーション内でtargetパラメーターか<method>LzBrowser.LoadURL</method>を使ってください。
</p>
<example extract="false" title="target in loadURL">
lzBrowser.loadURL('http://www.laszlosystems.com','contentArea');
</example>

<h3>インラインフレーム</h3>
<p>
フレームセットと同様、Laszloアプリケーションは“インラインフレーム”やあるいは、&lt;iframe&gt;内に埋め込むことが可能です。&lt;iframe&gt;はよりフレキシブルなレイアウトが可能で、
簡単に使うことができます。通常のフレームのように、インラインフレームはlaszloアプリケーションによって後で参照するための名前を付けることができます。
</p>

<example extract="false" title="iframes and applications">
&lt;html&gt;
  &lt;body&gt;
    &lt;h1&gt;Here is a header&lt;/h1&gt;
    &lt;div align="center"&gt;
      &lt;iframe src="myLaszloApplication.lzx?lzt=html" width="200" height="200" 
              frameborder="0" name="inlineApplication" scrolling="no"/&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</example> 

<p>iframeはcanvasを含んでおり、ブラウザにスクロールバーを表示したい時以外は、canvasとマージンとを合わせた大きさに等しい幅と高さを指定すべきだということを心に留めておいてください。</p>

<h3>ブラウザウィンドウのポップアップと再利用</h3>
<p>フレームに対して内容をターゲットにするのと同じようにして、新しいウィンドウに対してloadUrlをターゲットにすることができます。
</p>

<example class="code" title="new Blank window">
&lt;canvas height="20" &gt;
  &lt;button onclick="lzBrowser.loadURL('http://www.laszlosystems.com','_blank');" text="Click Me!"/&gt;
&lt;/canvas&gt;
</example>

<p>このメカニズムは、同じウィンドウ内での連続読み込みを許可しているウィンドウに名前を付けるときにも使うことができます。</p>

<example class="code" title="new Blank window">
&lt;canvas height="46" &gt;
  &lt;simplelayout/&gt;
  &lt;button onclick="lzBrowser.loadURL('http://www.laszlosystems.com','newLaszloWindow');" text="Laszlo Homepage"/&gt;
  &lt;button onclick="lzBrowser.loadURL('http://www.mylaszlo.com','newLaszloWindow');" text="myLaszlo.com"/&gt;
&lt;/canvas&gt;
</example>

<!--=========================================================================-->
<!-- Passing variables to Laszlo Applications                                        -->
<!--=========================================================================-->
<h2>スタートアップデータを埋め込みアプリケーションへ渡す</h2>
<p>アプリケーションをロードするためにurlの最後に付け加えたどのようなクエリパラメータも、アプリケーションにグローバル（変数）として渡されます。</p>

<example extract="false" title="Passing query parameters to LZX application">
&lt;script type="text/javascript"&gt;
lzEmbed({url: 'header.lzx?lzt=swf&amp;globalVar=foo', bgcolor: '#394660', width: '705', height: '80'});
&lt;/script&gt;     
</example>

<h3>クエリパラメータとグローバル変数</h3>
<p>一旦データが渡されてしまうと、グローバル変数としてLaszloアプリケーションの内部から単純にアクセスすることができます。</p>

<example extract="false" title="Accessing parameters">
&lt;canvas debug="true" oninit="Debug.write(globalVar)"/&gt;       
</example>    

<p>多くの場合、アプリケーションを埋め込んだHTMLコンテンツを完全にコントロールできるでしょう。多くのその他の場合、これらのクエリパラメータの存在に依存できないので、これらの値にはまともなデフォルト値を設定しておくほうが賢明です。</p>

<example title="Setting defaults"
     filename="browser-integration.setting-defaults.lzx">
&lt;canvas debug="true" width="200" height="200"&gt;
  &lt;script&gt;
    var innerVar = typeof(global.globalVar) != 'undefined' ? global.globalVar : 'bar';
    Debug.write(global.innerVar);
  &lt;/script&gt;
&lt;/canvas&gt;
</example>

<p>
先に紹介したアプリケーションは、<code>globalVar</code>クエリパラメータなしで要求されています。
そのため、デバッガはデフォルト値である<code>bar</code>を表示しています。
もし、このアプリケーションが<code>globalVar=foo</code>というクエリパラメータで呼び出されたら、デフォルト値である‘bar’を表示するでしょう。
このクエリパラメータを適用したポップアップウィンドウ内のアプリケーションを見るには、<a href="#"
onclick="javascript:window.open('programs/browser-integration.setting-defaults.lzx?lzt=swf&amp;globalVar=foo','example','resizable=0,width=200,height=200,menubar=0,location=0,status=0,scrollbars=0,toolbar=0,address=0')">ここ</a>をクリックしてください。
</p>

<h3>アプリケーションの状態</h3>
<p>クエリパラメータを使って、ある特定の状態でアプリケーションが開始するようにすることができます。タブスライダーのデフォルトの動作では、開始時にはすべてのタブ要素（エレメント）が閉じています。以下のアプリケーションでは、クエリパラメータ上で特定されたタブが開くようデフォルトを変更しており、一つ目が定義されない場合には、最初の要素が開かれます。</p>

<example title="Restoring state" filename="browser-integration.restoring-state.lzx">
&lt;canvas width="300" height="250"&gt;
  &lt;script&gt;
    var opened = typeof(global.tab) != 'undefined' ? global.tab : 'one';
  &lt;/script&gt;
  &lt;tabslider width="150" x="10" y="10"
             height="200"
             spacing="2" slideduration="300" oninit="this[global.opened].setAttribute('selected',true)"&gt;
    &lt;tabelement name="one" text="Tabelement One"/&gt;
    &lt;tabelement name="two" text="Tabelement Two"/&gt;
    &lt;tabelement name="three" text="Tabelement Three"/&gt;
  &lt;/tabslider&gt;
&lt;/canvas&gt;
</example>

<p>
異なる初期状態が適応されたこのアプリケーションをポップアップで見るには、<a href="#"
onclick="javascript:window.open('programs/browser-integration.restoring-state.lzx?lzt=swf&amp;tab=two','example','resizable=0,width=200,height=250,menubar=0,location=0,status=0,scrollbars=0,toolbar=0,address=0')">ここ</a>をクリックしてください。
この方法は、アプリケーションの外からのリンクを作成する場合や、
アプリケーションのためにブックマークを作成する場合などに便利です。
他にも、javascriptからブラウザのcookieを読み取って、
<method>LzEmbed</method>が呼び出された時にパラメータに渡すなどもにも利用できます。
</p>
<h3>SOLOアプリケーションへパラメータを渡す</h3>
<p>
もし、SOLOアプリケーションを展開していて、パラメータをベースURLからアプリケーションに渡したいときには、
サーバーが提供するstock html wrapperページにいくつかの修正を加える必要があります。
</p>
<p>
ダメージを受けていないLaszloアプリケーションへクエリパラメータ全てを渡している<code>lzEmbed</code>ラインは以下のとおりです。
</p>
<pre>
lzEmbed({url: 'main.lzx.swf?'+window.location.search.substring(1), bgcolor: '#ffffff', width: '100%', height: '100%'});
</pre>
<p>
異なっているのは、<code>main.lzx?lzt=swf</code>を<code>main.lzx.swf? </code>fに変更していることと、<code>'+window.location.search.substring(1)'</code>を追加していることです。
</p>
<!--=========================================================================-->
<!-- Multi Resolution applications                                                   -->
<!--=========================================================================-->
<h2>多岐にわたる解像度のサポート</h2>
<p>ほとんどのWebサーファーは、高解像度ディスプレイのメリットを発見しています。
しかしながら、中にはまだかなり低解像度な状態でwebを閲覧している人々もいます。
Laszloアプリケーションは、同じアプリケーションの複数の解像度バージョンが、同じコードベースを使って共存できるような方法で記述することができます。
</p>

<p>canvas上ではなく、ライブラリファイル内でアプリケーションを生成することから始めますが、canvasに対応する視覚要素のサイズを設定するために、<code>$once{}</code>制約を使ってください。
</p>

<example title="Multi-canvas application library" extract="false">
mainApplication.lzx:
&lt;library&gt;
  &lt;tabslider width="$once{canvas.width - 20}" x="10" y="10"
             height="$once{canvas.height - 20}"
             spacing="2" slideduration="300"&gt;
    &lt;tabelement name="one" text="Tabelement One"/&gt;
    &lt;tabelement name="two" text="Tabelement Two"/&gt;
    &lt;tabelement name="three" text="Tabelement Three"/&gt;
  &lt;/tabslider&gt;
&lt;/library&gt;
</example>

<p>
それから、複数のファイル（あなたがサポートしたい各々のcanvas域のための）を作成してください。
</p>

<example title="Multi-canvas application files" extract="false">
mainApplication640.lzx:
&lt;canvas width="640" height="480"&gt;
  &lt;include href="mainApplication.lzx"/&gt;
&lt;/canvas&gt;

mainApplication800.lzx:
&lt;canvas width="800" height="600"&gt;
  &lt;include href="mainApplication.lzx"/&gt;
&lt;/canvas&gt;

mainApplication1024.lzx:
&lt;canvas width="1024" height="768"&gt;
  &lt;include href="mainApplication.lzx"/&gt;
&lt;/canvas&gt;

mainApplication1280.lzx:
&lt;canvas width="1280" height="1024"&gt;
  &lt;include href="mainApplication.lzx"/&gt;
&lt;/canvas&gt;
</example>

<p>現実世界での展開のために、ブラウザコントロールによって決まってしまう画面エリアに適合するように、canvasのサイズを決めたいと思うかもしれません。
HTMLwrapplicationerから正確なアプリケーションを選択するためには、ビジターがページを訪れた際に、いくつかのJavaScriptが正しいアプリケーションを選ぶことが要求されます。この例では、同様に高い正確さでクライアントの高さを決定する助けとなるスクリーン幅がキーとなります。
</p>

<example title="Using LzEmbed() to Selecting the Correct Canvas" extract="false">
&lt;script type="text/javascript"&gt;
var screenW = screen.width;
var screenH =0;
switch (true) {
  case (screenW &gt;= 1280):
    screenW = 1280;
    screenH = 1024;
    break;
  case (screenW &gt;= 1024):
    screenW = 1024;
    screenH = 768;
    break;
  case (screenW &gt;= 800):
    screenW = 800;
    screenH = 600;
    break;
  default:
    screenW = 640;
    screenH = 480;
    break;         
}
lzEmbed({url: 'mainApplication'+screenW+'.lzx?lzt=swf', bgcolor: '#394660', width: screenW, height: screenH});        
&lt;/script&gt;  
</example>

<!--=========================================================================-->
<!-- Communicating with JavaScript                                           -->
<!--=========================================================================-->

<h2>Javascriptとのコミュニケーション</h2>

<p>
wrapperHTMLの中の<method>lzEmbed</method>呼出に引数を加えること、あるいは、サーバーからアプリケーションをリクエストした時に引数をクエリー文字列に加えることによって、初期化引数を渡すことが可能となります。
</p>
<p>
もし、canvas上に、対応する名前と値なしという属性を定義するなら、これらの属性はアプリケーションが開始する時にセットされるでしょう。
</p>
<p>
例えば、これをアプリケーションのcanvasに加えると、
</p>
<pre>
        &lt;attribute name="foo" /&gt;
</pre>
<p>
fooの値が、例えばHTML内のlzEmbed経由で渡されることになります。</p>
<pre>

    lzEmbed({url: 'grad_test.lzx?lzt=swf&amp;foo=bar', bgcolor: '#ffffff', width: '800', height: '600'});
</pre>
<p>
によって、アプリケーションがスタートした時に、fooの属性が’bar’を持つことになります。</p>
<h3>双方向通信</h3>
<p>
<classname>LzHistory</classname>を使うことで、ブラウザとLaszloアプリケーション間の双方向通信を可能になります。
<code>?lzt=history</code>要求タイプによってLaszloアプリケーションを呼び出す場合、これを可能にするjavascriptの関数を含んだwrapperが返されます。
。
</p>
<p>
アプリケーションがロードされた後、通信メソッドは以下のようになります</p>
<ul>
	<li>Laszloアプリケーションからブラウザに対して、<classname>lzBrowser</classname>サービスの<method>loadURL</method>を使用</li>
	<li>ブラウザからLaszloアプリケーションに対して、LzSetCanvasAttributeを使用</li>
</ul>
<p>
canvas上で明らかにされている属性は、どのようなものであれ、ブラウザのjavascriptに見えます。
ブラウザからアプリケーションに情報を渡す場合には、<code>lzSetCanvasAttribute</code>関数を使います。
</p>
<p>
ここで紹介しているのは、この章の始めから使っている例、”Hello Grace”と通信するためにこれらのメソッドを使うwrapperページです。ボタンをクリックすると、Laszloアプリケーション内の’reset’というグローバル変数がセットされます。</p>
<example title="bidirectional application wrapper" extract="false">

&lt;!DOCTYPE html
  PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
   &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
   
      &lt;link rel="SHORTCUT ICON" href="http://www.laszlosystems.com/favicon.ico"&gt;
      &lt;title&gt;Laszlo Application&lt;/title&gt;&lt;style type="text/css"&gt;
      html, body { margin: 0; padding: 0; height: 100%; }
      body { background-color: #ffffff; }
    &lt;/style&gt;&lt;script src="/lps-dev/lps/includes/embed.js" type="text/javascript"&gt;&lt;/script&gt;&lt;/head&gt;
   &lt;body&gt;&lt;script type="text/javascript"&gt;
            lzEmbed({url: 'graceie.lzx?lzt=swf&amp;__lzhistconn='+top.connuid+'&amp;__lzhisturl=' + escape('/lps-dev/lps/includes/h.html?h='), bgcolor: '#ffffff', width: '500', height: '300'});
            lzHistEmbed('/lps-dev');
        &lt;/script&gt;
    &lt;form&gt;
    &lt;input type="button" onclick="lzSetCanvasAttribute('reset', true)" value="Reset"/&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

</example>

<h4>例：URLを作る</h4>
<p>
この例では、<method>LzBrowser.loadURL()</method>メソッドが、ユーザのインプットした情報を元にしてどのようにURLを生成するのかに注目してください。このURLはブラウザに伝えられ、そこではその情報を取り出し、フォームを埋めるのにjavascript関数が使われます。そのwrapperページを以下に示します。
</p>
<example name="Using loadURL to pass information" extract="false">
&lt;canvas width="200" height="400"&gt;
    &lt;attribute name="appear" type="number" value="0" /&gt;
    &lt;method event="onappear"&gt;
        win.show.doStart();
    &lt;/method&gt;

    &lt;window id="win" title="Create and Account" 
            y="-300"
            width="180" height="300"&gt;
        &lt;animator name="show" attribute="y" from="-300" to="50" 
                  start="false" relative="false" duration="500" /&gt;
        &lt;animator name="hide" attribute="y" from="50" to="-300" 
                  start="false" relative="false" duration="500" /&gt;
        &lt;simplelayout axis="y" spacing="4" /&gt;
         
        &lt;state name="question" apply="true"&gt;
            &lt;text multiline="true" width="160" align="center"&gt;
                It looks like you don't have an account. Would you 
                like to create one now?
            &lt;/text&gt;
            &lt;button&gt;Go
                &lt;method event="onclick"&gt;
                    parent.question.remove();   
                    parent.signup.apply();
                &lt;/method&gt;
            &lt;/button&gt;
        &lt;/state&gt;
        &lt;state name="signup"&gt;
            &lt;text&gt;Name:&lt;/text&gt;
            &lt;edittext /&gt;
            &lt;text&gt;Email:&lt;/text&gt;
            &lt;edittext /&gt;
            &lt;text&gt;Username:&lt;/text&gt;
            &lt;edittext name="uname"/&gt;
            &lt;text&gt;Password:&lt;/text&gt;
            &lt;edittext name="pass" /&gt;
            &lt;button&gt;Create Account
                &lt;method event="onclick"&gt;
                    var s = "javascript:fillFormValues('"
                          + parent.uname.getText()
                          + "', '" + parent.pass.getText()
                          + "')";
                    LzBrowser.loadURL(s);
                    parent.hide.doStart();
                &lt;/method&gt;
            &lt;/button&gt;
        &lt;/state&gt;
    &lt;/window&gt;    
&lt;/canvas&gt;
</example>
<p>
これが、以下の3つにより生成されたサンプルのwrapperページです。</p>
<ol>
	<li>?lzt=historyクエリを使ったプログラムの実行</li>
	<li>”view source”からコピーし、.htmlファイルへ貼り付けることで、wrappeを保存</li>
	<li>ボタン用のロジックでwrapperを編集し、名前とパスワードを取り出す</li>
</ol>

<example title="Wrapper for login example application" extract="false">
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Login Form&lt;/title&gt;
    &lt;script type="text/javascript" src="/lps-3.0b2/lps/includes/embed.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        function fillFormValues( uname, pass ) {
            document.forms[0].u.value = uname;
            document.forms[0].p.value = pass;
        }
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Login Form&lt;/h1&gt;

&lt;table&gt;
&lt;tr&gt;
    &lt;td width="200"&gt;
        &lt;p&gt;
            Please enter your username and password below. If you don't have a username and password, you will be prompted to create an account.
        &lt;/p&gt;
        &lt;form name="f" action="" onsubmit="lzSetCanvasAttribute('appear', 1); return false; return false"&gt;
            Username:&lt;br&gt;
            &lt;input name="u" type="text"&gt;&lt;br&gt;
            Password&lt;br&gt;
            &lt;input name="p" type="password"&gt;&lt;br&gt;
            &lt;input type="submit" value="Log In"&gt;
        &lt;/form&gt;
    &lt;/td&gt;
    &lt;td&gt;
    
            &lt;script type="text/javascript"&gt;
lzEmbed({url: 'createaccount.lzx?lzt=swf&amp;__lzhistconn='+top.connuid+'&amp;__lzhisturl=' + escape('/lps-3.0b2/lps/includes/h.html?h='), bgcolor: '#ffffff', width: '200', height: '400'});
            lzHistEmbed('/lps-3.0b2');
          &lt;/script&gt;
    &lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

&lt;/body&gt;
&lt;/html&gt;

</example>

<h2>ブラウザの「戻る」ボタンを使う</h2>
<p>
<classname>LzHistory</classname>サービスはアプリケーションの状態を保存するので、ブラウザの「戻る」ボタンを使ってそういった（保存された）状態間を移動します。
</p>
<p>
<code>lzt=history</code> を使ってアプリケーションに要求を出すと、「戻る」ボタンとブラウザ-LZX間通信を可能にするwrapperページを得ることができます。一旦こうしてしまうと、ブラウザjavascriptメソッド
</p>
<pre>
        javascript:lzSetCanvasAttribute(attributeName, value)
</pre> 
<p>
を呼び出し、canvas属性をセットしてエベントを送ることができます。
以下に示す例は、<classname>LzHistory</classname> サービスが状態間を移動するために動作する方法を示します。このプログラムを実際に見たい場合には、このコードをアプリケーションディレクトリにコピーし、<code>
lzt="history" </code>要求を使ってそれを呼び出してください。
</p>
<example extract="false" title="Communicating with Back button">
&lt;canvas width="1400" height="600" debug="true"&gt;
  &lt;debug width="500" height="500" fontsize="12" x="450"/&gt;

  &lt;!-- Click on blob START, STATE_2, STATE_3, END, then click browser back button --&gt;

  &lt;!-- a blob you can click on to select --&gt;
  &lt;class name="blob" extends="drawview" width="100" height="100"&gt;
    &lt;attribute name="title" type="text"/&gt;
    &lt;attribute name="selected" type="boolean" /&gt;
    &lt;text y="20" x="4" fontsize="16" text="${parent.title}"/&gt;
    &lt;method event="onclick"&gt;
      this.setAttribute('selected', true);
      main.selectBlob(this);
    &lt;/method&gt;

    &lt;method name="select" args="val"&gt;
      if (val) {
      // draw a border to select
        this.lineStyle = 0x000000;
        this.lineWidth = 4;
        moveTo(0,0);
        lineTo(0,100);
        lineTo(100,100);
        lineTo(100,0);
        lineTo(0,0);
        stroke();
      } else {
          clear();
      }
    &lt;/method&gt;

  &lt;/class&gt;

  &lt;!-- A view with four states --&gt;
  &lt;view id="main" x="10" y="10"  layout="axis: x; spacing: 10"&gt;
    &lt;attribute name="mystate" type="string" value="START"/&gt;

    &lt;blob bgcolor="#ffcccc" id="s1" title="START"/&gt;
    &lt;blob bgcolor="#ccccff" id="s2" title="STATE_2"/&gt;
    &lt;blob bgcolor="#ccffcc" id="s3" title="STATE_3"/&gt;
    &lt;blob bgcolor="#cccccc" id="s4" title="END"/&gt;

    &lt;method name="unselectAll"&gt;
      s1.select(false);
      s2.select(false);
      s3.select(false);
      s4.select(false);
    &lt;/method&gt;

    &lt;method name="selectBlob" args="blob"&gt;
       <em>// save the old state
     LzHistory.next();</em>
      setAttribute('mystate', blob.title);
      unselectAll();
      blob.select(true);
      recordState(blob.title);
    &lt;/method&gt;

    &lt;method event="oninit"&gt;
      unselectAll();
      recordState("START");
      selectBlob(s1);
    &lt;/method&gt;

    &lt;method event="onmystate"&gt;
      Debug.write("got onmystate event: ", this.mystate);
      gotoState(this.mystate);
    &lt;/method&gt;

    &lt;method name="recordState" args="newstate"&gt;
      this.mystate = newstate;
     <em> LzHistory.save(this,'mystate', this.mystate);</em>
      Debug.write("recordState", newstate)
    &lt;/method&gt;

    &lt;method name="gotoState" args="ns"&gt;
      unselectAll();
      if (ns == "START") {
          s1.select(true);
      } else if (ns == "STATE_2") {
          s2.select(true);
      } else if (ns == "STATE_3") {
          s3.select(true);
      } else if (ns == "END") {
          s4.select(true);
      }
    &lt;/method&gt;
  &lt;/view&gt;

&lt;/canvas&gt;

</example>
<fixme>


</fixme>
<!--=========================================================================-->
<!-- Browser Imposed limitations & caveats                                   -->
<!--=========================================================================-->
<h2>ブラウザの制限</h2>
<p>キーストロークを途中でさえぎることで、いくつかの問題が生じます。さえぎられたキーはブラウザごとに異なりますが、ブラウザが定義したものが何であれLaszloアプリケーションには渡されません。Mozilla Firefoxはこれを正確に行っているようですが、他の多くのブラウザはaltキーとctrlキーの組み合わせをアプリケーションに渡さないようです。以下に示すアプリケーションはこれをデモンストレーションしており、［Ctrl-n］は多くのブラウザで、新しいウィンドウを開く時に使うコマンドです。Mozilla Firefoxでは、正しいメッセージを表示するためにデバッガを手に入れることができますが、それもマウスが当該のアプリケーション上を動いている場合に限ります。</p>

<example>
&lt;canvas height="130" debug="true"&gt;
  &lt;command oninit="this.setKeys(['Control','n'])"
           onselect="Debug.write('the [Ctrl-n] key combination was pressed');" /&gt;
&lt;/canvas&gt;
</example>

<fixme>Safari caching info goes here</fixme>
<fixme>
not all browsers support transparency of flash over html.  In those cases changing the background color has no effect.
canvas transparent by default -- so bgcolor should be respected by rendering browser. Default bgcolor comes from canvas, if set.
Two classes of browsers
-- active x
-- plug ing

Windows browsers often active x exception is open source mozilla(s)

Active X -- uses object tag
others use embed tag

so, "Wrapper"  page must include info for BOTH types.

Esoteric combinations exist, but we generate code for general cases.

what we send depends on request type. If lzt=swf then we just send swf.  Else, we send and html page (of some form -- link to chapter on lps request types.)

</fixme>
<fixme>
Henry's history example

</fixme>
      <!--=========================================================================-->
      <!-- Flash version issues                                                    -->
      <!--=========================================================================-->
      <?ignore
      <fixme/>
    <h2>Flash Plugin stuff</h2>
    <ul>
      <li>why flash versioning matters
        <ul>
          <li>For bonanza, only need to guarantee that fp5 or greater is there</li>
          <li>But later we will have a host of other reasons to request fp6.</li>
          <li>fp5 on linux is really unusably slow</li>
          <li>Often flas version is irrelevant</li>
        </ul>
      </li>
      <li>internationalized applications</li>
      <li>other flash 6 features</li>
      <li>other flash 7 features</li>
      <li>how to detect flash version</li>
      <li>what to do with this info:  what kind of options the programmer has for deploying to different flash clients</li>
    </ul>

    <!-- Here is a list of some topics you may want to discuss in this chapter-->
    <fixme>
      If you set the noscale option, then the application can adapt to its browser size.  One application could be embedded in multiple pages at different sizes, then you could layout content differently depending on canvas dimensions.

      If you want it to be dynamic at runtime (e.g. using embed/object tag w/ width/height = 100%), we would need to expose stage._width and stage._height.  In Flash 6, there's ActionScript to get notified when properties change.

      --I need to get this info from sarah on how all this will be exposed for Bonanza
    </fixme>

    <fixme>
      .     single-threaded-ness but re-entrance possible
      .     when might your code be interrupted?
      .     need to avoid script that takes more than frametime (which is typically 30fps)
      .     affects of imported swf frame rates on application framerate
      LzURL
    </fixme>


    <p>
      Anything else that an application developer or deployer might need to be aware of that has to do with
      ** which browser the application will run in
      ** which flash version the application will run in
    </p>

    
    
    <h2> Memory leaks in Flash</h2>
    <h3>I don't believe that this actually belongs in this chapter...</h3>
    <p>
      As we have a number of bugs filed against memory leaks caused by
      specific LFC components, and this is a recurring subject of Dev list
      threads, I can't help but wonder about a few things in this regard.
    </p>
    <p>
      1. First of all, what do we consider a memory leak? If you run an application
      for a while and its memory footprint grows and never comes down to its
      original level, does that necessarily indicate a leak in our libraries?
      Or is a leak defined as delta between the memory size of the browser
      before and after a Flash application was loaded then unloaded?
    </p>
    <p>
      2. If Flash is very much like Java/Perl/Python etc. as far as memory
      management is concerned, then I don't quite see how application
      developers (specifically, Laszlo) could be blamed for the lazy nature of
      garbage collection which they have no control over whatsoever. The only
      case you'd need to be careful about is making sure there are no circular
      references in the code, i.e.
    </p>
    <pre class="code">
 var a = new Object()
 var b = new Object()
 a.foo = b
 b.foo = a
    </pre>
    <fixme>

      ** need to find out from max what will make it in for bonanza... ask and ye shall receive
      Emerald
        Version detection
        canvas resizeability (mx Stage version)
        embedargs method
        For passing args in without using query string/busting
        cache
        sharedobjects?

      (Time allowing, if possible)
      Browser cooke set/get
      Frames back button support

      Future
      Back button, other MX-required features 
    </fixme>
<fixme>
from the wrapper page
Deploying This Application

Using the HTML Wrapper

The simplest way to deploy an application is to use the  html request type. This generates an HTML page  that uses the JavaScript embed.js library to embed the application. Unlike the development page (with no request  type), it does not display the developer console and compiler  warnings.

 View the result of the HTML deployment page here.  (Note that this page is generated dynamically in the browser,  adapting to the particular browser's capabilities, so the  browser source view is not equivalent to the HTML deployment  page source.)

 Deployment with an Embedded object Tag

 The application can also be embedded within a page that does  not use the JavaScript library. This can be a good choice if you  expect many clients to have JavaScript disabled in their  browser.

 View the HTML page with the embedded object tag here.  (Note that while this page is generated dynamically by the  server, adapting to the particular browser's capabilities, only  Internet Explorer on Windows gets special treatment; the code  generated for all other browsers is XHTML 1.0 compliant. The  code generated for Internet Explorer on Windows uses proprietary  extensions to ensure that the correct version of the Flash  plug-in is installed. Internet Explorer on Windows can also display the XHTML 1.0 version, so if you need to embed your  application into a larger static page, you should use the XHTML  1.0 version.)

 To deploy using static XHTML 1.0 compliant code, place the  following in your HTML document where the Laszlo application  should appear:
&lt;object type="application/x-shockwave-flash"
        data="graceie.lzx?lzt=swf"
        width="500" height="400"&gt;
  &lt;param name="movie" value="graceie.lzx?lzt=swf" /&gt;
  &lt;param name="quality" value="high" /&gt;
  &lt;param name="scale" value="noscale" /&gt;
  &lt;param name="salign" value="LT" /&gt;
  &lt;param name="menu" value="false" /&gt;
&lt;/object&gt;

 Deployment with the JavaScript embed.js Library

 To deploy using the JavaScript embed.js library,  place the following line within the <head>  section of the HTML document that embeds the Laszlo  application:
&lt;script src="/lps-dev/lps/includes/embed.js" type="text/javascript"&gt;&lt;/script&gt;

 Place the following element within the &lt;body&gt;  section of the document, at the location where the Laszlo  application should appear:
&lt;script type="text/javascript"&gt;
          lzEmbed({url: 'graceie.lzx?lzt=swf', bgcolor: '#ffffff', width: '500', height: '400'});
&lt;/script&gt;

 Click here to see an example deployment page.

 You can also use the js request type to generate  the call to lzEmbed:
&lt;script src="graceie.lzx?lzt=js" type="text/javascript"&gt;
&lt;/script&gt;

 If the HTML page is moved to a different directory than the  lzx source file, the value of the 'url' parameter will need to  be changed.

 Deploying a Kranked Application

To use the Kranked version of an application, replace  graceie.lzx above by  graceie.lzo. See the Krank  chapter of the LZX  Developers' Guide for more information about the Krank  feature.

 To use the kranked version if it is available, and compile an  unkranked application otherwise, replace graceie.lzx above by graceie.lzo?fb=1.

 Scaling and Cropping

To crop the application to the width and height, add  scale: 'noscale' to the list of arguments to  lzEmbed above. Otherwise the application will be  scaled.

 More Information
	 	Deployer's Guide
	 	Request Types
	 	Developer Network
	 	Developer Forums
</fixme>
?>

  </body>
</html>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2001-2004 Laszlo Systems, Inc.  All Rights Reserved.              *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->
